<template>
    <view class="container">
        <view ref="report" id="report" class="report-content">
            <text class="title">医疗检查报告单</text>
            <view class="table-container">
                <text class="subtitle">检查结果</text>
                <view class="table">
                    <view class="table-row">
                        <text class="table-cell">检查项目</text>
                        <text class="table-cell">结果</text>
                        <text class="table-cell">备注</text>
                    </view>
                    <view class="table-row" v-for="(item, index) in results" :key="index">
                        <text class="table-cell">{{ item.name }}</text>
                        <text class="table-cell">{{ item.result }}</text>
                        <text class="table-cell">{{ item.remark }}</text>
                    </view>
                </view>
            </view>
            <view class="signature">
                <text class="subtitle">签字</text>
                <view class="signature-box">____________________</view>
            </view>
        </view>
        <!-- 操作按钮 -->
        <view class="buttons">
            <button @click="text.handlePrint" class="download-btn">打印</button>
        </view>
        ---------------图片 start---------------
        <image :src="posterUrl" style="width: 100%; height: 300px;"></image>
        ---------------图片 end---------------
    </view>
</template>
<!-- 普通的script标签 -->
<script>
const printerModule = uni.requireNativePlugin("PrinterModule")

export default {
    data(){
        return {
            posterUrl: "",
            results: [
                {name: "血压", result: "120/80 mmHg", remark: "正常"},
                {name: "血糖", result: "5.2 mmol/L", remark: "正常"},
                {name: "心电图", result: "正常", remark: "无异常"},
            ],
        }
    },
    methods:{
        // 获取生成的base64 图片路径
        receiveRenderData(val) {
            let posterUrl = val.replace(/[]/g, ''); // 去除base64位中的空格
            console.log('start',posterUrl)
            this.posterUrl = posterUrl;
            setTimeout(()=>{
                this.handlePrint()
            })
        },
        /**打印*/
        handlePrint() {
            // 添加打印资源
            const result = printerModule.addPrintFile({
                fileBase64: this.posterUrl
            })
            if (result.success) {
                uni.showToast({
                    title: '添加打印资源成功!',
                    icon: 'success',
                    duration: 2000
                });
                setTimeout(() => {
                    uni.hideToast();
                }, 2000);
            } else {
                uni.showToast({
                    title: '添加打印资源失败!',
                    icon: 'none',
                    duration: 2000
                });
                setTimeout(() => {
                    uni.hideToast();
                }, 2000);
            }
            //开始打印
            const printResult = printerModule.startPrint();
            if (printResult.success) {
                uni.showToast({
                    title: '打印成功!',
                    icon: 'success',
                    duration: 2000
                });
                setTimeout(() => {
                    uni.hideToast();
                }, 2000);
            }else{
                uni.showToast({
                    title: '打印失败!',
                    icon: 'none',
                    duration: 2000
                });
                setTimeout(() => {
                    uni.hideToast();
                }, 2000);
            }
        }
    }
}
</script>
<!-- renderjs的script标签 -->
<script module="text" lang="renderjs">
    import html2canvas from 'html2canvas'
    export default {

        methods:{
            // 生成图片需要调用的方法
            handlePrint(event, ownerInstance) {
                //console.log("22222")
                setTimeout(() => {
                    const dom = document.getElementById('report') // 需要生成图片内容的 dom 节点
                    html2canvas(dom, {
                      width: dom.clientWidth, //dom 原始宽度
                      height: dom.clientHeight,
                      scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                      scrollX: 0,
                      useCORS: true, //支持跨域
                      // scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
                    }).then((canvas) => {
                        // 生成成功
                        console.log("生成成功")
                        // html2canvas 生成成功的图片链接需要转成 base64位的url
                        ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
                    }).catch(err=>{
                        console.log("生成图片失败");
                    })
                }, 300)
            }



        }
    }
</script>
<style scoped>
.container {
    padding: 20rpx;
}

.report-content {
    border: 1px solid #ccc;
    padding: 20rpx;
    margin-bottom: 20rpx;
}

.title {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
}

.subtitle {
    font-size: 24rpx;
    margin-top: 20rpx;
}

.table-container {
    margin-top: 20rpx;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table-row {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
    border: 1px solid #ccc;
}

.table-cell {
    width: 33%;
    text-align: center;
}

.signature {
    margin-top: 30rpx;
    text-align: center;
}

.signature-box {
    border-bottom: 2px solid #000;
    width: 200rpx;
    margin: 0 auto;
    margin-top: 20rpx;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
}

.download-btn, .preview-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10rpx 20rpx;
    font-size: 18rpx;
    border-radius: 5rpx;
    width: 48%;
}

.download-btn:hover, .preview-btn:hover {
    background-color: #45a049;
}

.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.preview-container {
    position: relative;
    background-color: white;
    padding: 20rpx;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.preview-image {
    max-width: 100%;
    max-height: 80vh;
}

.close-btn {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 8rpx;
    border-radius: 50%;
    font-size: 20rpx;
    cursor: pointer;
}

.close-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
</style>
